<script setup lang="ts">
import {EllipsisOutlined} from "@ant-design/icons-vue";

const props = defineProps({
  triggerType: {
    type: String, //hover || focus ||click
    default: 'click',
  }
})
</script>

<template>
  <a-popover :trigger="props.triggerType" placement="bottom">
    <EllipsisOutlined class="actionButton"></EllipsisOutlined>
    <template #content>
      <div class="options-wrap">
        <slot name="body"></slot>
      </div>
    </template>
  </a-popover>
</template>

<style scoped lang="scss">
.options-wrap{
  display: flex;
  flex-direction: column;
  :deep button{
    text-align: left;
    margin: 5px 0;
    display: block;
  }
}
.actionButton{
  color: #368EFF;
  font-size: 35px;
  cursor: pointer;
}
</style>